<template>
  <div class="table-wrap">
    <el-table
      :header-cell-style="tableHeaderStyle"
      :row-style="tableRowStyle"
      ref="multipleTable"
      :data="imageVideoList"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <!-- <el-table-column type="selection" width="50"> </el-table-column> -->
      <el-table-column label="序号" min-width="6">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column
        min-width="22"
        prop="fileName"
        show-overflow-tooltip
        label="文件名称"
      >
      </el-table-column>
      <el-table-column
        min-width="22"
        prop="memo"
        label="描述"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column min-width="14" prop="createDate" label="上传时间">
      </el-table-column>
      <el-table-column min-width="8" prop="operator" label="创建人">
      </el-table-column>
      <el-table-column min-width="8" label="审核状态">
        <template slot-scope="scope">
          <span :class="getExamineClass(scope.row.isExamine)">{{
            getExamineType(scope.row.isExamine)
          }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="20" fixed="right" label="操作">
        <template slot-scope="scope">
          <div class="btns flex-center">
            <div class="btn add flex-center" @click.stop="edit(scope.row)">
              <div class="icon add"></div>
              <div class="tit">编辑</div>
            </div>
            <div class="btn edit flex-center" @click="goDetail(scope.row)">
              <div class="icon edit"></div>
              <div class="tit">详情</div>
            </div>
            <div
              class="btn del flex-center"
              @click="deleteImage(scope.$index, scope.row)"
            >
              <div class="icon del"></div>
              <div class="tit">删除</div>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- <div style="margin-top: 20px">
      <el-button @click="toggleSelection([tableData[1], tableData[2]])"
        >切换第二、第三行的选中状态</el-button
      >
      <el-button @click="toggleSelection()">取消选择</el-button>
    </div> -->
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  props: {
    imageVideoList: {
      default: () => [],
    },
  },
  data() {
    return {
      tableData: [],
      multipleSelection: [],
    };
  },
  computed: {
    ...mapState({
      dataTypeTabsId(state) {
        return state.app.dataTypeTabsId;
      },
      targetTreeChecked(state) {
        return state.app.targetTreeChecked;
      },
    }),
  },
  methods: {
    getExamineType(type) {
      if (type == 1) {
        return "未审核";
      } else if (type == 2) {
        return "审核通过";
      } else if (type == 3) {
        return "废弃";
      } else if (type == 4) {
        return "存疑";
      }
    },
    getExamineClass(type) {
      if (type == 1) {
        return "examine1";
      } else if (type == 2) {
        return "examine2";
      } else if (type == 3) {
        return "examine3";
      } else if (type == 4) {
        return "examine4";
      }
    },
    //设置表头行的样式
    tableRowStyle() {
      return "";
    },
    //设置表头行的样式
    tableHeaderStyle() {
      return "height:0.3rem;background-color:#034576 !important;color:#fff;font-size:0.14rem;text-align:center";
    },
    deleteImage(index, item) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        showClose: false,
        closeOnClickModal: false,
        closeOnPressEscape: false,
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api
            .deleteImage({
              ids: [item.id],
              type:
                this.dataTypeTabsId == 2
                  ? "image"
                  : this.dataTypeTabsId == 3
                  ? "video"
                  : "data",
            })
            .then(() => {
              this.$emit("deleteSuccess", index);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
            showClose: true,
          });
        });
    },
    // 获取右边详情数据
    async getAsideItem(id) {
      // 改为请求接口获取右边详情信息
      let data = await this.$api.singleInfo({
        type: this.dataTypeTabsId,
        id: id,
      });
      return new Promise((resolve) => {
        resolve(data);
      });
    },
    async edit(item) {
      let data = await this.getAsideItem(item.id);
      this.$router.push({
        name: "imagesVideoAddTable",
        params: {
          selectedTabId: this.dataTypeTabsId,
          item: data,
          isEdit: true,
        },
      });
    },
    async goDetail(item) {
      let data = await this.getAsideItem(item.id);
      this.$router.push({
        name: "imageVideoDetail",
        params: {
          item: data,
        },
      });
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
.table-wrap {
  @include scrollBar;
  overflow-y: auto;
  height: calc(100vh - 2rem);
}
.btns {
  width: 2.84rem;
  .btn {
    width: 0.88rem;
    height: 0.28rem;
    border-radius: 5px;
    &.edit {
      margin: 0 0.1rem;
    }
  }
  .icon {
    width: 0.15rem;
    height: 0.15rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    &.add {
      background-image: url(~@/assets/common/add@2x.png);
    }
    &.edit {
      background-image: url(~@/assets/images/edit@2x.png);
    }
    &.del {
      background-image: url(~@/assets/images/del@2x.png);
    }
  }
  .add {
    background-color: #1890ff;
  }
  .edit {
    background-color: #1890ff;
  }
  .del {
    background-color: #e64f4f;
  }
  .tit {
    margin-left: 0.08rem;
    font-size: 0.14rem;
    font-weight: 400;
    color: #ffffff;
  }
}
::v-deep .el-table {
  font-size: 0.14rem;
  padding-bottom: 10px;
  background-color: rgba(0, 0, 0, 0) !important;
  &::before {
    content: "";
    display: none;
  }
  .el-table__fixed::before,
  .el-table__fixed-right::before {
    display: none;
  }
  border: none;
  color: #ffffff;
  .el-table__row {
  }
  th {
    // background-color: rgba(47, 47, 47, 1);
    // background: rgba(47, 47, 47, 1);
  }
  .el-table__row {
    border: none;
    // height: 30px !important;
  }
  th,
  td {
    padding: 0.12rem 0;
  }
  // .hover-row td {
  //   background-color: rgba(47, 47, 47, 1) !important;
  //   background: rgba(47, 47, 47, 1) !important;
  // }
  td,
  th,
  tr,
  tbody {
    border: none;
    background-color: rgba(0, 0, 0, 0) !important;
  }
  .cell {
    color: #fff;
    text-align: center;
  }
}
.examine1 {
  color: #409eff;
}
.examine2 {
  color: #67c23a;
}
.btns {
  color: #f56c6c;
}
.examine4 {
  color: #e6a23c;
}
</style>